<template>
	<view>
		<u-popup v-model="showPopup" mode="bottom">
			<view class="popup-box">

				<view class="wx">
					<view class="wx-input">
						<view class="" style="margin-bottom: 20rpx;">
							头像
						</view>
						<button type="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
							style="width:50rpx;height: 50rpx;padding: 0;margin-bottom: 30rpx;" class="btn">
							<image v-if="headimgurl==''" src="@/static/images/my.png"
								style="width: 100%;height: 100%;" />
							<image v-else :src="headimgurl" style="width: 100%;height: 100%;" />
						</button>
					</view>
					<view class="wx-input">
						<view class="" style="margin-bottom: 20rpx;">
							昵称
						</view>
						<input :value="nickname" type="nickname" class="usernickname" @change="getname"
							placeholder="请输入昵称" />
					</view>

				</view>
				<view class="done" @click="login2" style="margin: 20rpx 0;font-size: 30rpx;">
					确认
				</view>
			</view>
		</u-popup>

		<view class="user">
			<u-modal v-model="show" :show-cancel-button="true" confirm-text="确定" title=" 退出登录 " @cancel="cancel"
				@confirm="confirm">
				<view class="u-update-content" style="padding: 40rpx ;text-align: center;">
					<text>请问是否退出登录</text>
				</view>
			</u-modal>
			<view class="user-top">
				<view class="userinfo" v-if="isLogin" @click="show='true'">
					<u-avatar mode="circle" size="150" :src="userInfo.avatar"></u-avatar>
					<view class="info">
						<text>{{userInfo.nickname}}</text>
						<view class="vip" v-if="userVip.is_release==2">
							<image src="../../static/images/VIP1.png" mode="" style="width: 40rpx;height: 40rpx;">
							</image>
							<text class="viptext">{{userVip.name}}</text>
						</view>
						<view class="vip" v-else>
							<text class="viptext">普通会员</text>
						</view>
					</view>
				</view>
				<view class="userinfo" v-else @click="wxlogin()">
					<u-avatar mode="circle" size="150" src="avatar"></u-avatar>
					<view class="info">
						<text style="color: #666666;">点击微信登录</text>
					</view>
				</view>
			</view>
		</view>
		<view class="menu">
			<text class="menu-title">我的功能</text>
			<u-grid :col="4" :border="false">
		
				<u-grid-item @click="navTo('/pagesUser/recharge/recharge',true)">
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu6.png"></u-image>
						<view class="grid-text">充值积分</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="menu">
			<text class="menu-title">工具与服务</text>
			<u-grid :col="4" :border="false">
				<u-grid-item v-if="opentop" @click="navTo('/pagesUser/vip/vip',true)">
					<u-image width="80rpx" height="80rpx" src="@/static/images/vip.png"></u-image>
					<view class="grid-text">我的会员</view>
				</u-grid-item>
				<u-grid-item>
					<!--#ifdef MP-WEIXIN-->
					<button class="concat" hover-class='none' open-type="contact">
						<u-image style="margin-bottom: -15rpx;" width="80rpx" height="80rpx"
							src="@/static/images/menu16.png"></u-image>
						<view style="margin-bottom: -15rpx;" class="grid-text">联系客服</view>
					</button>
					<!--#endif-->
					<!--#ifndef MP-WEIXIN-->
					<view class="gird" @click="callContact">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu16.png"></u-image>
						<view class="grid-text">联系客服</view>
					</view>
					<!--#endif-->
				</u-grid-item>
				<u-grid-item @click="navTo('/pagesUser/help/help',false)">
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu17.png"></u-image>
						<view class="grid-text">帮助中心</view>
					</view>
				</u-grid-item>
				<u-grid-item @click="navTo('/pagesUser/feedback/feedback',true)">
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu18.png"></u-image>
						<view class="grid-text">意见反馈</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<!--#ifdef MP-WEIXIN-->
					<button class="concat" hover-class='none' open-type="share">
						<u-image style="margin-bottom: -15rpx;" width="80rpx" height="80rpx"
							src="@/static/images/menu19.png"></u-image>
						<view style="margin-bottom: -15rpx;" class="grid-text">邀请好友</view>
					</button>

					<!--#endif-->
					<!--#ifndef MP-WEIXIN-->
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu19.png"></u-image>
						<view class="grid-text">邀请好友</view>
					</view>
					<!--#endif-->
				</u-grid-item>
				<u-grid-item @click="navTo('/pagesUser/posterImg/posterImg',true)">
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu12.png"></u-image>
						<view class="grid-text">分享海报</view>
					</view>
				</u-grid-item>

				<!-- 	<view class="botbtn" style="width: 80%;margin: 60rpx;margin-left: 10%;">
			<u-button style="flex: 1;" type="primary" @click="navigateWithParams">跳转</u-button>
		</view> -->

				<!-- 		<u-grid-item @click="navTo('/pagesUser/setting/setting',false)">
          <view class="gird">
            <u-image width="80rpx" height="80rpx" src="@/static/images/menu20.png"></u-image>
            <view class="grid-text">系统设置</view>
          </view>
        </u-grid-item>-->
			</u-grid>
		</view>
		
		<view class="menu" v-if='is_Show!==1'>
			<text class="menu-title">招聘管理</text>
			<u-grid :col="4" :border="false">
				<u-grid-item @click="navTo('/pages/job/job',true)">
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu12.png"></u-image>
						<view class="grid-text">我的发布</view>
					</view>
				</u-grid-item>
				<u-grid-item @click="navTo('/pages/job/job',true,'招聘信息')">
					<view class="gird">
						<u-image width="80rpx" height="80rpx" src="@/static/images/menu12.png"></u-image>
						<view class="grid-text">招聘信息</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<liu-poster ref="liuPoster" :width="750" :height="1300" @change="change"></liu-poster>
	</view>
</template>


<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import {
		APP_MOBILE,
		APP_NAME
	} from '../../env.js';
	var logpImg = '../../static/images/logo.png'
	export default {
		data() {
			return {
				is_Show:1,
				headimgurl: '',
				userImg: "http://tmp/RcJvKcGByqqv66ff334952c4d6f86ebfa29b3148942f.jpeg",
				nickname: '',
				showPopup: false,
				show: false,
				topShow: false,
				posterImgPath: '', // 存储生成的海报路径
				userVip: {
					vip_id: 1,
					vip_time: 0,
					name: "可发布会员"
				},
				opentop: false,
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		onLoad(option) {
			console.log(option)
			if (option && option.scene) {
				this.scendLogin(option.scene.slice(-28))
			}
		},
		onShow() {
			// 自动登录

			if (uni.getStorageSync('type')) {
				uni.showLoading({
					title: '正在加载中...'
				})
				wx.login({
					success: res => {
						console.log(res)
						if (res.code) {
							// 将 res.code 发送到后台获取用户的登录态信息
							this.$u.post('/api/login/mnplogin', {
								code: res.code,
							}).then(sessionRes => {
								// 处理登录后的逻辑
								this.login(sessionRes);
								uni.removeStorageSync('type');
							});
						}
					}
				});
			}
			if (this.userInfo) {
				this.userVip.is_release = this.userInfo.is_release;
				this.getUserCenter()
			}
		
		},
		onShareAppMessage() {
			if (!this.isLogin) {
				uni.showToast({
					title: '请先登录!',
					duration: 3000,
					icon: 'none'
				})
				return
			} else {
				uni.switchTab({
					url: pagePath,
					success: function() {
						console.log('跳转成功');
					},
					fail: function(err) {
						console.error('跳转失败', err);
					}
				});
				return {
					title: '邀请好友可获取积分',
					path: `/pages/user/user?id=${this.userInfo.openid}`,
					imageUrl: logpImg, // 可选，自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。
				};
			}

		},
		methods: {

			navigateWithParams() {
				// 使用 wx.navigateTo 传递参数
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			...mapActions([
				'login',
				'loginOut'
			]),
			cancel() {
				this.closeModal();
			},
			confirm() {
				this.loginOut();
				this.closeModal();
			},
			closeModal() {
				uni.navigateBack();
			},
			getUserCenter(openid) {
				let that = this
			that.$u.post('api/user/center').then(sessionRes => {
				console.log(sessionRes);
				that.is_Show=sessionRes.is_show
			});
			
			},
			
			scendLogin(openid) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.$u.post('/api/login/mnplogin', {
							code: loginRes.code,
							openid: openid
							// headimgurl:that.userImg,
							// nickname:that.userName
						}).then(sessionRes => {
							console.log(sessionRes);
							that.login(sessionRes);
						});
					}
				});

			},
			getname(e) {

				this.nickname = e.detail.value


			},
			login2() {
				var that = this;
				if (that.nickname == '') {
					this.$u.toast('请输入昵称')
					return
				}
				if (that.headimgurl == '') {
					this.$u.toast('请上传头像')
					return
				}
				uni.showLoading({
					title: '正在加载中...'
				})
				that.$u.post('/api/login/updateUser', {
					nickname: that.nickname,
					avatar: that.headimgurl

				}).then(res => {
					that.showPopup = false
					that.sessionRes.avatar = that.headimgurl
					that.sessionRes.nickname = that.nickname,
						// that.sessionRes
						that.login(that.sessionRes);


				})
			},
			onChooseavatar(e) {
				let that = this
				that.userImg = e.detail.avatarUrl
				var uploadurl = "https://ship.jiankaobang.com/api/upload/image"
				uni.uploadFile({
					url: uploadurl,
					filePath: that.userImg,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					fileType: 'image',

					// formData: {
					//     'openid': '123456'
					// },

					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						if (data.code == 1) {
							that.headimgurl = data.data.uri;
						}
					}
				});
			},

			wxlogin() {
				var that = this;
				uni.showLoading({
					title: '正在加载中...'
				})
				console.log(1111223)
				uni.getUserProfile({
					desc: '需要获取您的微信头像以及昵称',
					lang: 'zh_CN',
					success: function(infoRes) {
						console.log(infoRes.rawData);
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(loginRes);

								that.$u.post('/api/login/mnplogin', {
									code: loginRes.code,

								}).then(sessionRes => {
									if (sessionRes.is_new_user == 0) {
										that.login(sessionRes)
									} else {
										that.showPopup = true
										uni.setStorageSync('token', sessionRes.token)
										that.sessionRes = sessionRes
									}

									uni.removeStorageSync('type');



								})
							}
						});
					}
				});
			},

			navTo(path, toLogin,title) {

				if (toLogin) {
					if (this.isLogin) {
						if (path == '/pages/job/job') {
							if(title=='招聘信息'){
											uni.removeStorageSync('user_id')
								this.$u.route(path);
							}else{
								uni.setStorageSync("user_id", this.userInfo.id, ); //赋值
								uni.switchTab({
									url: '/pages/job/job',
									success: function() {
										console.log('跳转成功');
									},
									fail: function() {
										console.log('跳转失败');
									}
								});
							}
							
						}
						console.log(path)
						this.$u.route(path);
					} else {
						uni.showToast({
							title: '请先登录!',
							duration: 3000,
							icon: 'none'
						})

					}
				} else {
					this.$u.route(path);
				}
			},
			callContact() {
				uni.makePhoneCall({
					phoneNumber: APP_MOBILE
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.user-top {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.userinfo {
				display: flex;
				flex-direction: row;
				align-items: center;

				.info {
					margin-left: 20rpx;
					color: #333333;
					font-weight: 600;
					font-size: 35rpx;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					margin-right: 20rpx;

					.vip {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 24rpx;
						margin-top: 15rpx;

						.viptext {
							margin-left: 10rpx;
							color: #333333;
							font-weight: normal;
						}
					}
				}
			}

			.sigin {
				background-color: #f44c01;
				margin-right: -20rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				color: white;
				height: 50rpx;
				width: 150rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.menu {
		margin: 20rpx;
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx;

		.menu-title {
			font-size: 32rpx;
			color: #666666;
		}
	}

	.gird {
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #333333;
	}

	.concat {
		font-size: 28rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		height: 120rpx;
		overflow: hidden;
		color: #333333;
	}

	.concat::after {
		border: none;
	}

	.poster-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
		color: #ffffff;
		font-size: 30rpx;
	}

	.loading {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.gird {
		background-color: white;
		border-radius: 20rpx;
	}

	.cell {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.label {
			padding-left: 20rpx;
			padding-right: 20rpx;
			font-size: 30rpx;
		}
	}

	.cell1 {
		align-items: flex-start;
	}

	.appwx {
		margin-top: 28vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.modelcont {
		padding: 30rpx;
		width: 500rpx;

		.cont {
			.cell {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				font-size: 30rpx;
				color: #333333;
				background-color: #F1F1F1;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}
		}

		.close {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 50rpx;
		}
	}

	.popup-box {
		text-align: center;

		.wx-input {
			margin: 20rpx 0;
		}
	}
</style>